<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>uuQuery - test</title>
<style type="text/css">@import url(../../README.css);</style>
<script type="text/javascript" src="../../uuQuery.js"></script>
<script type="text/javascript" src="../iterator.js"></script>
<style type="text/css">
a[href] { color: lightblue }
b { color: gold }
pre { padding: 1em; border: 1px dashed navy; overflow: auto; color: ghostwhite; }
dt { margin-top: 1em; font-weight: bold; color: lightblue }
i {}
table, tr, th, td { border: 1px solid gray; }
p.test a { background-color: orange; }
</style>
</head>
<body>
  <div id="test">
    <p>this area has &lt;input type="hidden"&gt;
       &lt;div style="display: none"&gt;&lt;/div&gt;
       &lt;div style="visibility: hidden"&gt;&lt;/div&gt; elements</p>
    <ul>
      <li><input type="hidden" value="input type=hidden" /></li>
      <li><div style="display: none"></div></li>
      <li><div style="visibility: hidden"></div></li>
    </ul>
  </div>

<script>
window.onload = function() {
  uuQuery("#test>ul>:visible").forEach(function(v) {
    v.style.border = "2px dotted red";
  });
  uuQuery("#test>ul>li").forEach(function(v) {
    v.style.border = "2px dotted green";
  });
}
</script>

<pre>
  &lt;div id="test"&gt;
    &lt;p&gt;this area has &amp;lt;input type="hidden"&amp;gt;
         &amp;lt;div style="display: none"&amp;gt;&amp;lt;/div&amp;gt;
         &amp;lt;div style="visibility: hidden"&amp;gt;&amp;lt;/div&amp;gt; elements&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;input type="hidden" value="input type=hidden" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div style="display: none"&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;li&gt;&lt;div style="visibility: hidden"&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

&lt;script&gt;
window.onload = function() {
  uuQuery("#test&gt;ul&gt;:visible").forEach(function(v) {
    v.style.border = "2px dotted red";
  });
  uuQuery("#test&gt;ul&gt;li").forEach(function(v) {
    v.style.border = "2px dotted green";
  });
}
&lt;/script&gt;
</pre>

</body>
</html>
